{extend name="index_layout"/}
{block name="main"}

<div id="test1" class="demo-tree demo-tree-box left" style="width:20%;display: inline-block;"></div>
<div style="float: right;width: 80%;">
    <textarea name="content" id="content" style="width: 100%;height:400px"></textarea>
    <div style="background-color: #fff;border: 1px solid rgb(242, 242, 242);text-indent: 2em;">
        请从上方面板选择字段或选项；

支持英文模式下运算符（+、-、*、/、<、>、==、！=、<=、>=、&&（且）、||（或））

参考场景：计划数控件输入的值大于10000时，计划开始时间控件输入的值小于2020.10.1 00：00：00时，需要隐藏当前控件，则可将隐藏条件设置为：计划数>10000&&计划开始时间<2020.10.1 00：00：00.
    </div>
</div>
{/block}
{block name="script"}
<script>

    layui.use(['tree', 'util'], function(){
        var tree = layui.tree
        ,layer = layui.layer
        ,util = layui.util;
        var field = JSON.parse('{:json_encode($field)}');
        var data = [
            {title:'当前表单',id:1,type:1,children:field.now},
            {title:'用户信息',id:2,type:1,children:field.user},
        ];
        //常规用法
        tree.render({
            elem: '#test1' //默认是点击节点可进行收缩
            ,data: data
            ,showLine: false
            ,click: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
                if(data.type == 2){
                    var _html = $('#content').val();
                    _html += '${'+data.msg+'.'+data.title+'}';
                    $('#content').val(_html);
                }
                // layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });
    });
</script>
{/block}